import React, { useState } from 'react';
import { ChevronLeft, Search } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

const Messages = () => {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState('chat');
  
  return (
    <div className="flex flex-col h-full pb-16">
      {/* 头部 */}
      <div className="wx-header">
        <div className="wx-header-title">消息</div>
      </div>
      
      <div className="wx-content">
        {/* 搜索框 */}
        <div className="p-3 bg-white">
          <div className="flex items-center bg-gray-100 rounded-full px-3 py-1.5">
            <Search size={18} className="text-gray-400 mr-2" />
            <input 
              type="text" 
              placeholder="搜索聊天记录" 
              className="bg-transparent border-none outline-none flex-1 text-sm"
            />
          </div>
        </div>
        
        {/* 标签页 */}
        <div className="bg-white border-b">
          <div className="flex">
            <div 
              className={`flex-1 text-center py-3 ${activeTab === 'chat' ? 'text-green-500 border-b-2 border-green-500' : 'text-gray-600'}`}
              onClick={() => setActiveTab('chat')}
            >
              聊天
            </div>
            <div 
              className={`flex-1 text-center py-3 ${activeTab === 'notification' ? 'text-green-500 border-b-2 border-green-500' : 'text-gray-600'}`}
              onClick={() => setActiveTab('notification')}
            >
              通知
            </div>
          </div>
        </div>
        
        {activeTab === 'chat' ? (
          // 聊天列表
          <div className="bg-white">
            {[1, 2, 3, 4, 5].map((item) => (
              <div key={item} className="flex items-center p-3 border-b">
                <div className="relative">
                  <div className="w-12 h-12 rounded-full bg-gray-200"></div>
                  {item === 1 && (
                    <div className="absolute top-0 right-0 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center">
                      <span className="text-white text-xs">3</span>
                    </div>
                  )}
                </div>
                <div className="ml-3 flex-1">
                  <div className="flex justify-between">
                    <span className="font-medium">用户名称</span>
                    <span className="text-xs text-gray-500">10:30</span>
                  </div>
                  <div className="flex justify-between mt-1">
                    <p className="text-sm text-gray-600 truncate w-48">
                      {item === 1 ? '您好，我对您的物料很感兴趣，可以交换吗？' : '好的，期待与您交流'}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          // 通知列表
          <div className="bg-white">
            {[1, 2, 3, 4].map((item) => (
              <div key={item} className="p-3 border-b">
                <div className="flex justify-between mb-1">
                  <span className="font-medium">
                    {item % 2 === 0 ? '交换申请通知' : '活动提醒'}
                  </span>
                  <span className="text-xs text-gray-500">昨天 14:30</span>
                </div>
                <p className="text-sm text-gray-600">
                  {item % 2 === 0 
                    ? '用户"粉丝昵称"申请与您交换物料，点击查看详情' 
                    : '您报名的《新电影》观影活动将于明天19:00开始，请准时到场'}
                </p>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

export default Messages;